<template>
  <view>
    <wd-tabbar
      v-model="tabbar"
      fixed
      bordered
      safe-area-inset-bottom
      placeholder
      custom-class="tabbar"
      active-color="blue-50"
      inactive-color="blue-100"
      @change="handleChange1"
    >
      <wd-tabbar-item title="首页" name="/pages/home/index">
        <template #icon="{active}">
          <Icon icon="mingcute:home-6-fill" :color="active?'#4C70F0':'#C5CAD5'" size="5" />
        </template>
      </wd-tabbar-item>
      <wd-tabbar-item title="工作台" name="/pages/workbench/index">
        <template #icon="{active}">
          <i class="iconfont" :style="getIconStyle(active).value">&#xe860;</i>
        </template>
      </wd-tabbar-item>
      <wd-tabbar-item title="消息" name="/pages/message/index">
        <template #icon="{active}">
          <i class="iconfont" :style="getIconStyle(active).value">&#xe84a;</i>
        </template>
      </wd-tabbar-item>
      <wd-tabbar-item title="我的" name="/pages/profile/index">
        <template #icon="{active}">
          <i class="iconfont" :style="getIconStyle(active).value">&#xe7b5;</i>
        </template>
      </wd-tabbar-item>
    </wd-tabbar>
  </view>
</template>

<script setup lang="ts">
import {getCurrentPageUrl} from '@/utils/page';
import {onShow} from '@dcloudio/uni-app';
import {Icon} from "@iconify/vue";

const tabbar = ref('');

onShow(() => {
  console.log('onShow');
  tabbar.value = '/' + getCurrentPageUrl();
});

function handleChange1({value}: { value: string }) {
  uni.switchTab({url: value});
}

const getIconStyle = (active: boolean) => computed(() => ({
  fontSize: '21px',
  color: active ? '#4C70F0' : '#C5CAD5'
}));
uni.hideTabBar();
</script>

<style scoped>
.tabbar {
  background-color: rgba(255, 255, 255, 0.4); /* 半透明背景 */
  opacity: 0.9; /* 调整透明度 */
  border-top: 1px solid rgba(255, 255, 255, 0.3); /* 增加顶部边框 */
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); /* 模拟毛玻璃的光晕效果 */
}
</style>
